@charset "UTF-8";
.mj-loading-parent-relative {
  position: relative !important;
}

.mj-loading {
  position: absolute;
  z-index: 2000;
  background-color:hsla(0,0%,100%,.68);
  margin: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: opacity .3s;
}

.mj-loading .mj-loading-spinner {
  top: 50%;
  left: 50%;
  width: 100%;
  text-align: center;
  line-height: normal;
  position: absolute;
  transform: translate(-50%, -50%);
}

.mj-loading .mj-loading-spinner .loading-svg {
  width: 45px;
  height: 45px;
  animation: loading-rotate 2s linear infinite;
}

.mj-loading .mj-loading-spinner .svg-path {
  animation: loading-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-width: 2px;
  stroke: var(--primary);
  stroke-linecap: round;
}

.mj-loading .mj-icon-rotate {
  animation: loading-rotate 2s linear infinite;
  display: inline-block;
  /*border: 2px solid #fff;*/
/*  border-top-color: transparent;
  border-radius: 50%;
  width: 30px;
  height: 30px;*/
  font-size: 30px;
  color:#fff;
}

.mj-loading .mj-loading-text {
  color: #409eff;
  margin: 3px 0;
  font-size: 14px;
}

.mj-loading.mj-loading-full {
  position: fixed;
}

/*过渡动画*/
.mj-loading-fade-enter-active {
  animation: loading-fade-enter .3s;
}

.mj-loading-fade-leave-active {
  animation: loading-fade-leave .3s;
}

@keyframes loading-fade-enter {
  0% {
    opacity: 0;
  }
}

@keyframes loading-fade-leave {
  100% {
    opacity: 0;
  }
}

@keyframes loading-rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loading-dash {
  0% {
    stroke-dasharray: 1,200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90,150;
    stroke-dashoffset: -40px;
  }
  to {
    stroke-dasharray: 90,150;
    stroke-dashoffset: -120px;
  }
}

/*square风格*/
.la-square-jelly-box,.la-square-jelly-box>div {
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.la-square-jelly-box {
    display: inline-block;
    font-size: 0;
    color: #fff
}

.la-square-jelly-box.la-dark {
    color:var(--primary)
}

.la-square-jelly-box>div {
    display: inline-block;
    float: none;
    background-color: currentColor;
    border: 0 solid currentColor
}

.la-square-jelly-box {
    width: 32px;
    height: 32px
}

.la-square-jelly-box>div:nth-child(1),.la-square-jelly-box>div:nth-child(2) {
    position: absolute;
    left: 0;
    width: 100%
}

.la-square-jelly-box>div:nth-child(1) {
    top: -25%;
    z-index: 1;
    height: 100%;
    border-radius: 10%;
    -webkit-animation: square-jelly-box-animate 0.6s -0.1s linear infinite;
    -moz-animation: square-jelly-box-animate 0.6s -0.1s linear infinite;
    -o-animation: square-jelly-box-animate 0.6s -0.1s linear infinite;
    animation: square-jelly-box-animate 0.6s -0.1s linear infinite
}

.la-square-jelly-box>div:nth-child(2) {
    bottom: -9%;
    height: 10%;
    background: #000;
    border-radius: 50%;
    opacity: .2;
    -webkit-animation: square-jelly-box-shadow 0.6s -0.1s linear infinite;
    -moz-animation: square-jelly-box-shadow 0.6s -0.1s linear infinite;
    -o-animation: square-jelly-box-shadow 0.6s -0.1s linear infinite;
    animation: square-jelly-box-shadow 0.6s -0.1s linear infinite
}

.la-square-jelly-box.la-sm {
    width: 16px;
    height: 16px
}

.la-square-jelly-box.la-2x {
    width: 64px;
    height: 64px
}

.la-square-jelly-box.la-3x {
    width: 96px;
    height: 96px
}

@-webkit-keyframes square-jelly-box-animate {
    17% {
        border-bottom-right-radius: 10%
    }

    25% {
        -webkit-transform: translateY(25%) rotate(22.5deg);
        transform: translateY(25%) rotate(22.5deg)
    }

    50% {
        border-bottom-right-radius: 100%;
        -webkit-transform: translateY(50%) scale(1, 0.9) rotate(45deg);
        transform: translateY(50%) scale(1, 0.9) rotate(45deg)
    }

    75% {
        -webkit-transform: translateY(25%) rotate(67.5deg);
        transform: translateY(25%) rotate(67.5deg)
    }

    100% {
        -webkit-transform: translateY(0) rotate(90deg);
        transform: translateY(0) rotate(90deg)
    }
}

@-moz-keyframes square-jelly-box-animate {
    17% {
        border-bottom-right-radius: 10%
    }

    25% {
        -moz-transform: translateY(25%) rotate(22.5deg);
        transform: translateY(25%) rotate(22.5deg)
    }

    50% {
        border-bottom-right-radius: 100%;
        -moz-transform: translateY(50%) scale(1, 0.9) rotate(45deg);
        transform: translateY(50%) scale(1, 0.9) rotate(45deg)
    }

    75% {
        -moz-transform: translateY(25%) rotate(67.5deg);
        transform: translateY(25%) rotate(67.5deg)
    }

    100% {
        -moz-transform: translateY(0) rotate(90deg);
        transform: translateY(0) rotate(90deg)
    }
}

@-o-keyframes square-jelly-box-animate {
    17% {
        border-bottom-right-radius: 10%
    }

    25% {
        -o-transform: translateY(25%) rotate(22.5deg);
        transform: translateY(25%) rotate(22.5deg)
    }

    50% {
        border-bottom-right-radius: 100%;
        -o-transform: translateY(50%) scale(1, 0.9) rotate(45deg);
        transform: translateY(50%) scale(1, 0.9) rotate(45deg)
    }

    75% {
        -o-transform: translateY(25%) rotate(67.5deg);
        transform: translateY(25%) rotate(67.5deg)
    }

    100% {
        -o-transform: translateY(0) rotate(90deg);
        transform: translateY(0) rotate(90deg)
    }
}

@keyframes square-jelly-box-animate {
    17% {
        border-bottom-right-radius: 10%
    }

    25% {
        -webkit-transform: translateY(25%) rotate(22.5deg);
        -moz-transform: translateY(25%) rotate(22.5deg);
        -o-transform: translateY(25%) rotate(22.5deg);
        transform: translateY(25%) rotate(22.5deg)
    }

    50% {
        border-bottom-right-radius: 100%;
        -webkit-transform: translateY(50%) scale(1, 0.9) rotate(45deg);
        -moz-transform: translateY(50%) scale(1, 0.9) rotate(45deg);
        -o-transform: translateY(50%) scale(1, 0.9) rotate(45deg);
        transform: translateY(50%) scale(1, 0.9) rotate(45deg)
    }

    75% {
        -webkit-transform: translateY(25%) rotate(67.5deg);
        -moz-transform: translateY(25%) rotate(67.5deg);
        -o-transform: translateY(25%) rotate(67.5deg);
        transform: translateY(25%) rotate(67.5deg)
    }

    100% {
        -webkit-transform: translateY(0) rotate(90deg);
        -moz-transform: translateY(0) rotate(90deg);
        -o-transform: translateY(0) rotate(90deg);
        transform: translateY(0) rotate(90deg)
    }
}

@-webkit-keyframes square-jelly-box-shadow {
    50% {
        -webkit-transform: scale(1.25, 1);
        transform: scale(1.25, 1)
    }
}

@-moz-keyframes square-jelly-box-shadow {
    50% {
        -moz-transform: scale(1.25, 1);
        transform: scale(1.25, 1)
    }
}

@-o-keyframes square-jelly-box-shadow {
    50% {
        -o-transform: scale(1.25, 1);
        transform: scale(1.25, 1)
    }
}

@keyframes square-jelly-box-shadow {
    50% {
        -webkit-transform: scale(1.25, 1);
        -moz-transform: scale(1.25, 1);
        -o-transform: scale(1.25, 1);
        transform: scale(1.25, 1)
    }
}